<template>
    <div class="user-edit all-height">
        <!-- Drawer抽屉 -->
        <div :style="{ maxHeight: maxHeight }" class="drawer-content all-height">
            <div class="drawer-header">
                <div class="cmr16"  v-show="type == '2'">添加区</div>
                <div class="cmr16"  v-show="type !== '2'">编辑区</div>
            </div>
            <Form label-colon v-show="type !== '2'" label-position="right" :label-width="labelWidth">
                <Row :gutter="32">
                    <Col span="24">
                        <FormItem label="账号">
                            {{ form.username }}
                            <Tooltip trigger="hover" placement="right" content="账户已禁用">
                                <Icon v-show="form.status === -1" type="md-lock" size="18" 
                                class="cml10" style="cursor: pointer" />
                            </Tooltip>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="所在高校">
                            {{ form.gxmc }}
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="来源">
                            {{ form.bysly === '1' ? '学生注册' : '学生激活' }}
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <Form ref="form" :model="form" :rules="formValidate" label-position="right" :label-width="labelWidth" class="marginForm">
                <Row :gutter="32" v-if="type === '2'">
                    <Col span="24">
                        <FormItem label="账号" prop="username">
                            <Input v-model="form.username" clearable :maxlength="18" />
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32" v-if="type === '2'">
                    <Col span="24">
                        <FormItem label="密码" prop="password">
                            <SetPassword v-model="form.password" @on-change="changePass" />
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="24">
                        <FormItem label="姓名" prop="nickname">
                            <Input v-model="form.nickname" clearable />
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="24">
                        <FormItem label="手机号" prop="mobile">
                            <Input v-model="form.mobile" clearable />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="br right-bottom-edit" v-show="type != '0'">
            <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
            <Button @click="cancel">取消</Button>
        </div>
    </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import { addUser, editUser } from '@/api/bys/personInfo/bysAccount';
import SetPassword from '@/views/my-components/xboot/set-password.vue';
import { validateMobileNoBt, validatePassword, validateUsername } from '@/libs/validate';
export default {
    name: 'addEdit',
    components: {
        SetPassword
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object
        },
        type: {
            type: String,
            default: '0'
        }
    },
    data() {
        return {
            labelWidth: 80,
            visible: this.value,
            title: '',
            submitLoading: false,
            maxHeight: 510,
            form: {
                // 添加或编辑表单对象初始化数据
                username: '',
                password: '',
                nickname: '',
                passStrength: '',
                avatar: '',
                status: 0,
                roles: '',
                permissions: '',
                defaultRole: 0,
                roleName: '',
                departmentId: '',
                departmentTitle: '',
                mobile: '',
                resource: '',
                email: '',
                gxcode: '',
                gxmc: '',
                yxcode: '',
                yxmc: '',
                xlcc: '',
                xh: '',
                ksh: '',
                id_card: '',
                firstLogin: '',
                glxlcc: ''
            },
            // 表单验证规则
            formValidate: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { validator: validateUsername, trigger: 'blur' }
                ],
                nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: validateMobileNoBt, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        init() {},
        submit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.type == '1') {
                        // 编辑
                        this.submitLoading = true;
                        console.log(this.form);

                        editUser({
                            userId: this.form.id,
                            mobile: this.form.mobile,
                            nickName: this.form.nickname
                        }).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.$emit('on-submit', true);
                                this.visible = false;
                            }
                        });
                    } else {
                        // 添加
                        this.submitLoading = true;
                        addUser(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.$emit('on-submit', true);
                                this.visible = false;
                            }
                        });
                    }
                }
            });
        },
        cancel(e) {
            this.$emit('open-search', true);
        },
        setCurrentValue(value) {
            if (value === this.visible) {
                return;
            }
            if (this.type == '1') {
                this.title = '编辑';
                this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
            } else if (this.type == '2') {
                this.title = '添加';
                this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
            } else {
                this.title = '详细信息';
                this.maxHeight = '100%';
            }
            // 清空数据
            this.$refs.form.resetFields();
            if (this.type == '0' || this.type == '1') {
                // 回显数据处理
                this.form = this.data;
            } else {
                // 添加
                delete this.form.id;
            }
            this.visible = value;
        },
        changePass(v, grade, strength) {
            this.form.passStrength = strength;
            this.form.password = v;
        },
        onRestWindow() {
            // this.columns = this.restTableCellWidth(this.columns_1)
            this.labelWidth = this.searchLabelWidth(this.labelWidth)
        },
    },
    watch: {
        value(val) {
            this.setCurrentValue(val);
        },
        visible(value) {
            this.$emit('input', value);
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.init();
    }
};
</script>
<style lang="less" scoped>
.cmr16 {
    margin-right: 16px
}
.cml10 {
    margin-left: 10px;
}
</style>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/drawer-common.less";
.drawer-footer {
    z-index: 10;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    background: #fff;
}

.drawer-content {
    overflow: auto;
}

.drawer-content::-webkit-scrollbar {
    display: none;
}

.drawer-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
}

.drawer-title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 16px;
}
</style>
